<script setup>
import { ref, onMounted } from 'vue'
import router from '@/router'

const activeIndex = ref('/preview')
const handleSelect = (key, keyPath) => {
  router.push(key)
  activeIndex.value = key
}
onMounted(() => {
  activeIndex.value = router.currentRoute.value.path
})
</script>
<template>
  <div class="left-box">
    <div class="logo m-r-10">LOGO</div>
    <div class="m-r-10 f-bold">iDS-TCH55P-F/0411/03</div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#2d2d2d"
      text-color="#fff"
      active-text-color="#ffd04b"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="/preview">预览</el-menu-item>
      <!-- <el-menu-item index="2-1">回放</el-menu-item> -->
      <el-menu-item index="/image-list">图片</el-menu-item>
      <el-menu-item index="/settings">配置</el-menu-item>
    </el-menu>
  </div>
</template>
<style scoped>
.left-box {
  display: flex;
  font-size: 18px;
}
.logo {
  margin: 0 20px;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
.el-menu-item {
  font-size: 18px;
}
</style>
